import { Form, Input, Select } from 'antd'
import { forwardRef, useImperativeHandle } from 'react'
import { useDictOptions } from '@/hooks'

const BaseInfoForm = forwardRef(({ style }, ref) => {
  const { data: options } = useDictOptions('API_SERVICE_LABELS')
  const [form] = Form.useForm()
  useImperativeHandle(ref, () => ({
    validateFields: form.validateFields,
    getFieldsValue: form.getFieldsValue,
    setFieldsValue: form.setFieldsValue,
    options,
  }))
  return (
    <Form style={style} layout="horizontal" form={form}>
      <Form.Item name="name" label="服务名称" rules={[{ required: true, message: '请填写服务名称' }]}>
        <Input placeholder="请填写服务名称" />
      </Form.Item>
      <Form.Item name="labels" label="服务标签" rules={[{ required: true, message: '请选择服务标签' }]}>
        <Select
          mode="multiple"
          allowClear
          style={{
            width: '100%',
          }}
          placeholder="请选择服务标签"
          options={options}
        />
      </Form.Item>
      {/* <Form.Item
                name="appName2"
                label="权限字段"
                rules={[{ required: true, message: '请填写权限字段' }]}
                extra="请求服务时，必需将与用户绑定的token值添加到名为服务的${权限字段}的请求头中，用于鉴别访问用户。"
            >
                <Input placeholder="请填写权限字段" />
            </Form.Item> */}

      <Form.Item name="desc" label="服务描述">
        <Input.TextArea rows={4} placeholder="请输入内容" />
      </Form.Item>
    </Form>
  )
})

export default BaseInfoForm
